<template>
  <div class="box">
    <!-- 路由的出口 -->
    <router-view></router-view>
    <!-- <div class="botton">
      <div class="one" @click="addQiehuan(1)">第一个页面</div>
      <div class="two" @click="addQiehuan(2)">第二个页面</div>
      <div class="three" @click="addQiehuan(3)">第三个页面</div>
      <div class="four" @click="addQiehuan(4)">第四个页面</div>
    </div> -->
  </div>
  <!-- <AppanNiu /> -->
</template>
<script setup>
import { useRoute, useRouter } from "vue-router"
import userStore from "./store/index"
import AppanNiu from "./view/AppanNiu/index.vue"

const { one } = userStore()
const router = useRouter()
const addQiehuan = (e) => {
  if (e == 1) {
    one.updateActive(1)
    one.updateActive1(2)
    one.updateActive2(2)
    one.updateActive3(2)
    let aaa = 1
    let timer1 = setTimeout(() => {
      router.push("/one")
      aaa++
      if (aaa > 2) {
        clearInterval(timer1)
      }
    }, 1000)
  }
  if (e == 2) {
    one.updateActive(2)
    one.updateActive1(1)
    one.updateActive2(2)
    one.updateActive3(2)
    let bbb = 1
    let timer2 = setTimeout(() => {
      router.push("/two")
      bbb++
      if (bbb > 2) {
        clearInterval(timer2)
      }
    }, 1000)
  }
  if (e == 3) {
    one.updateActive(2)
    one.updateActive1(2)
    one.updateActive2(1)
    one.updateActive3(2)
    let ccc = 1
    let timer3 = setTimeout(() => {
      router.push("/three")
      ccc++
      if (ccc > 2) {
        clearInterval(timer3)
      }
    }, 1000)
  }
  if (e == 4) {
    one.updateActive(2)
    one.updateActive1(2)
    one.updateActive2(2)
    one.updateActive3(1)
    let ddd = 1
    let timer4 = setTimeout(() => {
      router.push("/four")
      ddd++
      if (ddd > 2) {
        clearInterval(timer4)
      }
    }, 1000)
  }
}
</script>
<style scoped lang="less">
.box {
  width: 1920px;
  box-sizing: border-box;
}
.botton {
  width: 1920px;
  height: 70px;
  background-color: pink;
  position: absolute;
  top: 800px;
  display: flex;
  justify-content: space-around;
  .one {
    cursor: pointer;
    width: 70px;
    height: 70px;
    background-color: red;
  }
  .two {
    cursor: pointer;
    width: 70px;
    height: 70px;
    background-color: red;
  }
  .three {
    cursor: pointer;
    width: 70px;
    height: 70px;
    background-color: red;
  }
  .four {
    cursor: pointer;
    width: 70px;
    height: 70px;
    background-color: red;
  }
}
</style>
